<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="th/m/include/head :: head(~{::title}, ~{::style})">
    <meta charset="utf-8">
    <title>位置</title>
    <style>
        html, body, .mui-content {
            height: 100%;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">
        位置
    </h1>
    <a id='comp' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue ">完成</a>
</header>
<div class="mui-content">
    <div id="container" style="width:100%;height: 90%;margin:0 auto;">
    </div>
    <span id="s_lo" style="margin:10px"></span>
</div>
<script
        type="text/javascript"
        src="http://api.tianditu.gov.cn/api?v=4.0&tk=31291e50f42ece7b3f1a5deca4c82ddc"
></script>
<script type="text/javascript" th:src="@{/weixin/js/macro/open_window_macro.js}"></script>
<script type="text/javascript" th:src="@{/weixin/js/macro/macro.js}"></script>
<script th:inline="javascript">
    var lat;
    var lon;
    var address;
    var code = [[${code}]];
    var val = [[${val}]];
    var editable = !![[${editable}]];

    if (editable) {
        $("#comp").show();
    } else {
        $("#comp").hide();
    }

    if (val == undefined || val == "") {
        showMap(false);
    } else {
        var _arr = new Array(); // 定义一数组
        _arr = val.split(","); // 字符分割
        if (_arr.length == 3) {
            lon = _arr[0];
            lat = _arr[1];
            showMap(true, lon, lat);
        }
    }

    mui(".mui-bar").on("tap", "#comp", function () {
        doneLocation(code, lat, lon, address);
    });

    var map, marker;
    function showMap(isLocated, lng, lat) {
        var zoom = 12;

        //初始化地图对象
        map = new T.Map('container');

        //创建缩放平移控件对象
        var _zoomControl = new T.Control.Zoom();

        //添加缩放平移控件
        map.addControl(_zoomControl);

        //创建缩放平移控件对象
        _zoomControl.setPosition(T_ANCHOR_TOP_LEFT);

        console.log('isLocated', isLocated);
        if (isLocated) {
            marker = new T.Marker(new T.LngLat(lng, lat));
            //向地图上添加标注
            map.addOverLay(marker);
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(lng, lat), zoom);
        } else {
            // 创建定位对象
            var lo = new T.Geolocation();
            var fn = function (e) {
                console.log(this);
                //当前为移动端时
                if (this.getStatus() == 0) {
                    map.centerAndZoom(e.lnglat, 15);
                    console.log('获取定位坐标：' + e.lnglat.lng + ',' + e.lnglat.lat);
                    marker = new T.Marker(e.lnglat);
                    map.addOverLay(marker);
                }
                //当前为PC端时
                if (this.getStatus() == 1) {
                    map.centerAndZoom(e.lnglat, e.level);
                    console.log('获取定位坐标：' + e.lnglat.lng + ',' + e.lnglat.lat);
                    marker = new T.Marker(e.lnglat);
                    map.addOverLay(marker);
                }
            };

            lo.getCurrentPosition(fn);
        }

        if (editable) {
            addMapClick();
        }
    }

    function addMapClick() {
        removeMapClick();
        map.addEventListener('click', mapClick);
    }

    function removeMapClick() {
        map.removeEventListener('click', mapClick);
    }

    let geocode = new T.Geocoder();
    function mapClick(e) {
        console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat());
        geocode.getLocation(e.lnglat, searchResult);
        setMarker(e.lnglat.getLng(), e.lnglat.getLat());
    }

    function searchResult(result) {
        if (result.getStatus() == 0) {
            console.log(result.getAddress());
            let addressComponent = result.getAddressComponent();
            lon = result.location.lon;
            lat = result.location.lat;
            address = result.getAddress();
        } else {
            console.error('服务器返回状态：' + result.getStatus());
            mui.toast(result.getMsg());
        }
    }

    //设置标注
    function setMarker(lng, lat) {
        map.clearOverLays();
        var marker = new T.Marker(new T.LngLat(lng, lat));
        //向地图上添加标注
        map.addOverLay(marker);
    }
</script>
</body>
</html>